<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刑满释放人员信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto">
    <h2>刑满释放人员信息</h2>

    <el-row>
        <el-col :span="6" style="margin-bottom: 10px">
            <el-button type="primary" @click="add">新增</el-button>
            <el-input v-model="name" style="width: 70%" @keyup.enter.native="loadTable(1)"></el-input>
        </el-col>
    </el-row>

    <el-table
            :data="page.content"
            stripe
            border
            style="width: 100%">
        <el-table-column
                prop="name"
                label="用户名"
        >
        </el-table-column>
        <el-table-column
                prop="idNumber"
                label="身份证号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="phoneNumber"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="isRecidivist"
                label="是否累犯">
        </el-table-column>
        <el-table-column
                prop="originalCrime"
                label="原罪名">
        </el-table-column>
        <el-table-column
                prop="originalSentence"
                label="原判刑期">
        </el-table-column>
        <el-table-column
                prop="prisonFacility`   "
                label="服刑场所">
        </el-table-column>
        <el-table-column
                prop="reasonNotPlaced"
                label="未安置原因">
        </el-table-column>
        <el-table-column
                prop="counselingStatus"
                label="帮教情况">
        </el-table-column>
        <el-table-column
                prop="reoffendStatus"
                label="是否重新犯罪">
        </el-table-column>
        <el-table-column
                prop="reoffendCrime"
                label="重新犯罪罪名">
        </el-table-column>
        <el-table-column
                prop="releaseDate"
                label="释放日期">
        </el-table-column>
        <el-table-column
                prop="riskAssessmentType"
                label="危险评估类型">
        </el-table-column>
        <el-table-column
                prop="handoverDate"
                label="衔接日期">
        </el-table-column>
        <el-table-column
                prop="handoverSituation"
                label="衔接情况">
        </el-table-column>
        <el-table-column
                prop="settlementDate"
                label="安置日期">
        </el-table-column>
        <el-table-column
                prop="settlementSituation"
                label="安置情况">
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" circle @click="del(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-pagination
                layout="prev, pager, next"
                :page-size="pageSize"
                :current-page="pageNum"
                @prev-click="loadTable"
                @current-change="loadTable"
                @next-click="loadTable"
                :total="page.totalElements">
        </el-pagination>
    </el-row>

    <el-dialog
            title="用户信息"
            :visible.sync="dialogVisible"
            width="40%">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="用户名">
                <el-input v-model="form.name" prop="name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="form.idNumber"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="form.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="是否累犯">
                <el-input v-model="form.isRecidivist"></el-input>
            </el-form-item>
            <el-form-item label="原罪名">
                <el-select v-model="form.originalCrime" placeholder="请选择原罪名">
                    <el-option label="危害国家安全罪" value="危害国家安全罪"></el-option>
                    <el-option label="危害公共安全罪" value="危害公共安全罪"></el-option>
                    <el-option label="破坏社会主义市场经济秩序罪" value="破坏社会主义市场经济秩序罪"></el-option>
                    <el-option label="侵犯公民人身权利/民主权利罪" value="侵犯公民人身权利/民主权利罪"></el-option>
                    <el-option label="侵犯财产罪" value="侵犯财产罪"></el-option>
                    <el-option label="妨害社会管理秩序罪" value="妨害社会管理秩序罪"></el-option>
                    <el-option label="危害国防利益罪" value="危害国防利益罪"></el-option>
                    <el-option label="贪污贿赂罪" value="贪污贿赂罪"></el-option>
                    <el-option label="军人违反职业罪" value="军人违反职业罪"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服刑刑期">
                <el-input v-model="form.originalSentence"></el-input>
            </el-form-item>
            <el-form-item label="服刑场所">
                <el-input v-model="form.prisonFacility"></el-input>
            </el-form-item>
            <el-form-item label="未安置原因">
                <el-input v-model="form.reasonNotPlaced"></el-input>
            </el-form-item>
            <el-form-item label="帮教情况">
                <el-input v-model="form.counselingStatus"></el-input>
            </el-form-item>
            <el-form-item label="是否重新犯罪">
                <el-input v-model="form.reoffendStatus"></el-input>
            </el-form-item>
            <el-form-item label="重新犯罪罪名">
                <el-input v-model="form.reoffendCrime"></el-input>
            </el-form-item>
            <el-form-item label="释放日期">
<!--                <el-input v-model="form.releaseDate"></el-input>-->
                <el-date-picker v-model="form.releaseDate" size="large" value-format=yyyy-MM-dd></el-date-picker>
<!--                <el-date-picker v-model="form.releaseDate" size="large" type="datetime" ></el-date-picker>-->
            </el-form-item>


            <el-form-item label="危险评估类型">
                <el-select v-model="form.riskAssessmentType" placeholder="请选择危险评估类型">
                    <el-option label="重点帮教人员" value="重点帮教人员"></el-option>
                    <el-option label="一般帮教人员" value="一般帮教人员"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="衔接日期">
<!--                <el-input v-model="form.handoverDate"></el-input>-->
                <el-date-picker v-model="form.handoverDate" size="large" value-format=yyyy-MM-dd></el-date-picker>
            </el-form-item>
            <el-form-item label="衔接情况">
                <el-select v-model="form.handoverSituation" placeholder="请选择衔接情况">
                    <el-option label="基层政府接回" value="基层政府接回"></el-option>
                    <el-option label="监所送回原籍" value="监所送回原籍"></el-option>
                    <el-option label="司法所接回" value="司法所接回"></el-option>
                    <el-option label="侵公安机关落实管控措施" value="侵公安机关落实管控措施"></el-option>
                    <el-option label="基层组织接回" value="基层组织接回"></el-option>
                    <el-option label="人员返回" value="人员返回"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="安置日期">
<!--                <el-input v-model="form.settlementDate"></el-input>-->
                <el-date-picker v-model="form.settlementDate" size="large" value-format=yyyy-MM-dd></el-date-picker>
            </el-form-item>
            <el-form-item label="安置情况">
                <el-select v-model="form.settlementSituation" placeholder="请选择安置情况">
                    <el-option label="落实责任田" value="落实责任田"></el-option>
                    <el-option label="公益性岗位安置" value="公益性岗位安置"></el-option>
                    <el-option label="企业认证为安置基地安置" value="企业认证为安置基地安置"></el-option>
                    <el-option label="建设政府投入为主的安置基地安置" value="建设政府投入为主的安置基地安置"></el-option>
                    <el-option label="从事个体经营" value="从事个体经营"></el-option>
                    <el-option label="企业和经济实体吸纳就业" value="企业和经济实体吸纳就业"></el-option>
                    <el-option label="自主创业" value="自主创业"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>

</div>

<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="element.js"></script>

<script>

    new Vue({
        el: '#app',
        data: {
            page: {},
            name: '',
            pageNum: 1,
            pageSize: 8,
            dialogVisible: false,
            form: {}
        },
        created() {
            this.loadTable(this.pageNum);
        },
        methods: {
            loadTable(num) {
                this.pageNum = num;
                $.get("/xmsf/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
                    this.page = res.data;
                });
            },
            add() {
                this.dialogVisible = true;
                this.form = {};
            },
            edit(row) {
                this.form = row;
                this.dialogVisible = true;
            },
            save() {
                let data = JSON.stringify(this.form);
                if (this.form.id) {
                    // 编辑
                    $.ajax({
                        url: '/xmsf',
                        type: 'put',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                } else {
                    // 新增
                    $.ajax({
                        url: '/xmsf',
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                }
            },
            del(id) {
                $.ajax({
                    url: '/xmsf/' + id,
                    type: 'delete',
                    contentType: 'application/json'
                }).then(res => {
                    this.loadTable(1);
                })
            }
        }
    })
</script>
</body>
</html>
